.animate {
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.animate--infinite {
  animation-iteration-count: infinite;
}

.animate-fade-in {
  animation-name: animate-fade-in;
}

@keyframes animate-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animate-fade-out {
  animation-name: animate-fade-out;
}

@keyframes animate-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.animate-slide-in {
  animation-name: animate-slide-in;
}

@keyframes animate-slide-in {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-out {
  animation-name: animate-slide-out;
}

@keyframes animate-slide-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(50%);
  }
}
